<template>
    <div class="big">
        <div class="flex">
              <div class="box" v-for="(v,index) in arr1" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p class="urname">{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title"><img :src="title" alt=""></p>
        <div class="flex1">
              <div class="box" v-for="(v,index) in arr2" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p>{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title"><img :src="title2" alt=""></p>
        <div class="flex1">
              <div class="box" v-for="(v,index) in arr3" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p>{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title"><img :src="title3" alt=""></p>
        <div class="flex1">
              <div class="box" v-for="(v,index) in arr4" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p>{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title"><img :src="title4" alt=""></p>
        <div class="flex1">
              <div class="box" v-for="(v,index) in arr5" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p>{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title"><img :src="title5" alt=""></p>
        <div class="flex1">
              <div class="box" v-for="(v,index) in arr6" :key="index">
                  <img :src="v.myimg" alt="">
                  <div class="text">
      
                      <p>{{ v.urname }}</p>
                      <p class="introduce">{{ v.introduce }}</p>
                      <div class="gifts">赠品</div>
                      <div class="display">
                          <div class="left"><p class="money">￥{{ v.money }}</p><p class="befor">￥{{ v.befor }}</p></div>
                          <div class="right"> <p>立即</p><p>抢购</p> </div>
                      </div>
                  </div>
              </div>
          </div>
          <p class="title" @click="fun"><img :src="title6" alt="" style="width: 100%; height: 100%;"></p>
          
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr1:'',
            title:"",
            arr2:'',
            title2:"",
            title3:"",
            title4:"",
            arr3:"",
            arr4:"",
            arr5:"",
            title5:"",
            arr6:"",
            title6:""

        }
    },
    methods:{
        fun(){
            this.$router.push('/homepage').catch(err=>{})
        }
    },

    mounted(){
        this.$http({
            url:"http://localhost:3000/navigation6",
            method:"get",
        }).then(res=>{
            console.log(res.data[0].data.data6[1]);
            this.arr1=res.data[0].data.data1
            this.title=res.data[0].data.data2[0].title
            this.arr2=res.data[0].data.data2
            this.title2=res.data[0].data.data3[0].title
            this.arr3=res.data[0].data.data3
            this.title3=res.data[0].data.data4[0].title
            this.arr4=res.data[0].data.data4
            this.title3=res.data[0].data.data4[0].title
            this.arr4=res.data[0].data.data4
            this.title4=res.data[0].data.data5[0].title
            this.arr5=res.data[0].data.data5
            this.title5=res.data[0].data.data6[0].title
            this.arr6=res.data[0].data.data6
            this.title6=res.data[0].data.data6[1].bottom

              
            });
          
               

            
    }
}
</script>

<style scoped>
.urname{
    font-size: 14px;
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.flex1{
    display: flex;
    flex-wrap: wrap;
}
.box{
    width: 48%;
    margin-left: 2%;
    margin-bottom: 10px;
    background-color: white;
}




.box img {
        height: 120px !important;
        width: 94% !important;
        margin-left: 3% !important;
        margin-top: 5px !important;
    }

    .introduce{
        font-size: 12px;
        color: gray;
    }
    .gifts{
        width: 40px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        background-color: #f5a623;
        color: white;
    }
    .left{
        width: 60px;
    }
    .display{
        display: flex;
    }
    .right{
        width: 40px;
        height: 40px;
        background-color: #f9453d;
        border-radius: 3px;
        font-size: 14px;
        text-align: center;color: white;
        margin-left: 50px;
    }
    .money{
        color: red;
    }
    .befor{
        font-size: 12px;
        text-decoration: line-through;
        color: gray;
    }
    .text{
        padding: 0px 0px 0px 3px ;
    }
.title>img { width: 100%;margin-bottom: 5px; };

</style>